<template>
	<view class="Nomain">
		<view class="Nocont">
			<!-- 头部 -->
			<view class="head">
				<!-- 商品图片+名字+箭头 -->
				<view class="goodsname">
					<image class="headimg" :src="orderList.logo" mode=""></image>
					<view class="headname">
						<text style="color:#333333;font-size:24rpx;">{{orderList.merchantName}}</text>
						<!-- 	<image src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/rightarrow.png" mode=""></image> -->
						<view class="time">
							<text>{{orderList.createTime}}</text>
						</view>
					</view>
				</view>
				<view class="changesuccess">
					<text class="headok">{{stateWait[orderList.state]}}</text>
				</view>
			</view>
			<!-- 内容 -->
			<view class="goodscont">
				<view class="conent">
					<text style="color: #333333;font-weight: bold;margin-right: 20rpx;">{{orderList.explain}}</text>
					<text style="color: #999999;font-weight: lighter;">x1</text>
				</view>
				<view class="money">
					<text style="color: #333333;">￥{{Number(orderList.userMoney).toFixed(2)}}</text>
				</view>
			</view>
			<!-- 支付 -->
			<view class="pay">
				<view class="allmoney">
					<view style="margin-right: 20rpx;">
						<text>总价: ￥{{Number(orderList.money).toFixed(2)}}</text>
					</view>
					<view style="margin-right: 40rpx;">
						<text>优惠: ￥{{Number(orderList.cashBonus).toFixed(2)}}</text>
					</view>
					<view style="margin-right: 46rpx;">
						<text>实付款:</text>
					</view>
					<view>
						<text>￥</text>
						<text style="color: #FF6633;font-size: 28rpx;">{{Number(orderList.userMoney).toFixed(2)}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单详情 -->
		<view class="orderdetails">
			<view class="title">
				<text>订单详情</text>
			</view>
			<view class="container">
				<text>订单编号：{{orderList.orderId}}</text>
				<text>电话号码：</text>
				<text>付款时间：</text>
				<text>消费时间：</text>
			</view>
		</view>

		<!-- 商家信息 -->
		<view class="shopinfor">
			<view class="title">
				<text style="color:#333333;font-size: 34rpx;font-weight: bold;padding: 20rpx;">商家信息</text>
			</view>
			<view class="container">
				<text style="color: #333333;font-size: 28rpx;font-weight: bold;">{{orderList.merchantName}}</text>
				<view>
					<text style="color: #333333;font-size: 28rpx;">{{orderList.address}}</text>
				</view>
				<view class="">
					<text style="color: #333333;font-size: 28rpx;">离我最近</text>
				</view>
			</view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="like" style="width: 100%;">
			<view class="liketitle">
				<image class="liketitle-img" src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/left.png" mode=""></image>
				<text style="color: #FFC30E;font-size: 28rpx;margin-left: 10rpx;margin-right: 10rpx;">你可能还喜欢</text>
				<image class="liketitle-img" src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/right.png" mode=""></image>
			</view>
			<view class="likegoods">
				<view class="zy_content">
					<view v-for="item in contentlist" :key="item" class="zy_card">
						<image @tap="touch_card" :data-id="item.id" :src="item.images" :key="item" @click="godetails(item.id)" mode="widthFix"></image>
						<view @tap="touch_card" :data-id="citem.id" class="zy_bottom_view">
							<text class="zy_title">{{item.commodityName}}</text>
							<text class="zy_money">¥ {{item.currentPrice}}</text>
							<text class="zy_old">¥ {{item.originalPrice}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 评价 -->
		<view class="evalu" v-if='orderList.state == 4'>
			<view @click="go()" style="width: 128rpx;height: 48rpx;border: 1px solid #FFC300;margin-top: 20rpx;margin-left:74%">
				<text>评价</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: [],
				contentlist: [],
				stateWait: {
					0: '未付款',
					1: '已付款',
					2: '已取消',
					3: '已退款',
					4: '已完成',
					6: '退款中'
				},
			}
		},

		onLoad(option) {
			this.orderId = option.orid
			console.log(this.orderId)
			const requestOrder = {
				url: `/api/order/careful/${this.orderId}`,
				method: "get",
				callBack: (res) => {
					this.text = 'request success';
					this.orderList = res.data
					console.log(this.orderList)
				}
			}
			this.$http.request(requestOrder)

			this.getRecommend()
		},

		methods: {

			// 商品随机推荐
			getRecommend() {
				const requestRecommend = {
					url: `/api/commodity/randomCommodity/1/2`,
					method: "get",
					callBack: (res) => {
						this.text = 'request success';
						this.contentlist = res.data
					}
				}
				this.$http.request(requestRecommend)
			},

			godetails(id) {
				uni.navigateTo({
					url: '../allbuy/Hotdetails?sid=' + id
				})
			},

			showcontent() {
				const index = this.contentlist.reduce(function(total, current) {
					return total + current.list.length
				}, 0);
				if (index > this.flowlist.length - 1) {
					this.$emit('flowend')
					return
				};
				const query = uni.createSelectorQuery().in(this);
				let flag = 0;
				query.selectAll('#zy_column_view').boundingClientRect(data => {
					flag = data[0].bottom - data[1].bottom < 0 ? 0 : 1;
					this.contentlist[flag].list.push(this.flowlist[index])
				}).exec()
			},
			//卡片点击事件
			touch_card(e) {
				this.$emit('flowtap', e.currentTarget.dataset.id)
			},
			//初始化
			zyinit() {
				this.contentlist = [{
					list: []
				}, {
					list: []
				}];
				setTimeout(() => {
					this.showcontent();
				}, 0)
			}
		},

		// mounted() {
		// 	if (this.flowlist.length) {
		// 		setTimeout(() => {
		// 			this.zyinit()
		// 		}, 200)
		// 	}
		// }
	}
</script>

<style>
	.Nomain {
		background-color: #F1F1F1;
		padding-top: 20rpx;
		/* height: 100vh; */
	}

	.Nocont {
		width: 710rpx;
		margin: 0 20rpx 20rpx;
		height: 230rpx;
		padding: 20rpx 0 26rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}

	.Nocont .head {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		height: 80rpx;
		padding-bottom: 20rpx;
		border-bottom: 4rpx solid #F1F1F1;
	}

	.goodscont {
		height: 40rpx;
		width: 666rpx;
		padding: 20rpx 22rpx;
		border-bottom: 4rpx solid #F1F1F1;
		display: flex;
		justify-content: space-between;
	}

	.goodscont text {
		font-size: 24rpx;
	}

	.goodsname {
		display: flex;
	}

	.head .headimg {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}

	.headname .time {
		font-size: 20rpx;
		color: #333333;
		display: block;
		font-weight: lighter;
		margin-top: 10rpx;
	}

	.headname image {
		width: 20rpx;
		height: 33rpx;
		position: absolute;
		top: 25rpx;
		left: 370rpx;
	}

	.changesuccess {
		color: #333333;
		font-size: 24rpx;
		line-height: 34rpx;
	}

	.pay .allmoney {
		display: flex;
		justify-content: center;
		float: right;
		margin-top: 10rpx;
		margin-right: 20rpx;
	}

	.allmoney text {
		font-size: 20rpx;
		color: #333333;
	}

	.orderdetails {
		width: 710rpx;
		height: 244rpx;
		margin: 0 20rpx 20rpx;
		padding: 16rpx 0 20rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}

	.title {
		border-bottom: 4rpx solid #F1F1F1;
		height: 62rpx;
		margin-bottom: 20rpx;
	}

	.title text {
		color: #333333;
		font-size: 34rpx;
		font-weight: bold;
		padding: 0 20rpx;
	}

	.container {
		padding: 0 20rpx;
		display: flex;
		flex-direction: column;
	}

	.container text {
		color: #333333;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.shopinfor {
		width: 710rpx;
		height: 204rpx;
		margin: 0 20rpx 20rpx;
		padding: 16rpx 0 20rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}

	.liketitle-img {
		width: 48rpx;
		height: 4rpx;
		margin-bottom: 4rpx;
	}

	.liketitle {
		margin-left: 32%;
	}
	
	.like{
		margin-bottom: 20rpx;
	}

	.zy_content {
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
		position: relative;
		display: flex;
		box-sizing: border-box;
		padding: 0 20rpx;
		flex-wrap: wrap;
		justify-content: space-between;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.zy_list {
		width: 45%;
		display: flex;
		flex-direction: column;
	}

	.zy_card {
		width: 344rpx;
		background-color: #fefefe;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 1px 1px 5px gray;
		margin-top: 20rpx;
	}

	.zy_card image {
		width: 344rpx;
		height: 352rpx !important;
		margin-bottom: 5rpx;
	}

	/* 底部卡片内容 */
	.zy_bottom_view {
		width: 100%;
		min-height: 100rpx;
		background-color: #fff;
		margin-bottom: 15rpx;
	}

	.zy_title {
		display: inline-block;
		width: 90%;
		max-height: 70rpx;
		margin-left: 5%;
		margin-top: 10rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #252525;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.zy_money {
		display: block;
		width: 90%;
		margin-left: 5%;
		margin-top: 52rpx;
		color: #f35d3c;
		font-size: 32rpx;
		font-weight: bold;
	}

	.evalu {
		width: 100%;
		height: 80rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		line-height: 50rpx;
		text-align: center;
	}

	.evalu text {
		color: #FFC30E;
	}

	.zy_old {
		display: block;
		width: 90%;
		margin-left: 40%;
		color: #acacac;
		font-size: 20rpx;
		margin-top: -30rpx;
		text-decoration: line-through;
	}
</style>
